<template>
  <div class="forgetp3">
    <vheader pageTitle="找回密码"></vheader>
    <ul>
      <li>
        <span class="icon-password"></span>
        <input type="number" placeholder="新密码" v-model="newPassword">
      </li>
      <li>
        <span class="icon-password"></span>
        <input type="number" placeholder="确认密码" v-model="newPasswordAgain">
      </li>
    </ul>
    <div class="forgetp1-btn">
      <vbutton 
        text="完成"
        :loading="loading"
        @click="nextStep"></vbutton>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import vbutton from 'components/common/button'
  import { Toast } from 'mint-ui'

  export default {
    data () {
      return {
        loading: false,
        newPassword: '',
        newPasswordAgain: ''
      }
    },
    methods: {
      nextStep () {
        if (this.newPassword !== this.newPasswordAgain) {
          Toast('密码输入不一致')
        }
        this.loading = true
        this.$http.post('/api/member/repairPassword', `mobile=${this.$route.params.loginName}&smsCode=${this.$route.params.smsCode}&password=${this.newPassword}`)
          .then((res) => {
            if (res.data.success) {
              Toast('恭喜您，修改密码成功')
              setTimeout(() => {
                this.$router.push('/login')
              }, 500)
            } else {
              this.loading = false
              Toast(res.data.msg)
            }
          })
          .catch((err) => {
            console.log(err)
            this.loading = false
          })
      }
    },
    components: {
      vheader,
      vbutton
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';
  .forgetp3 {
    width: 100%;
    height: 100%;
    background: url('../../assets/forget_bg@2x.png') 0 0 no-repeat;
    background-size: cover;
    .icon-password {
      color: #999;
    }
    p:nth-child(2) {
      margin-top: 30px;
      font-size: 26px;
      color: $base-666;
      text-indent: 30px;
    }
    p:nth-child(3) {
      text-align: center;
      line-height: 120px;
      font-size: 60px;
      color: $base-ff6c00;
    }
    ul {
      margin-top: 30px;
      padding: 0 30px;
      font-size: 30px;
      li {
        margin-top: 30px;
        padding: 0 30px;
        display: flex;
        align-items: center;
        height: 92px;
        border-bottom: 1px solid $base-e5e5e5;
      }
      input {
        flex: 1;
        outline: none;
        margin-left: 20px;
        background: transparent;
      }
    }
    &-btn {
      text-align: center;
      font-size: 0;
      margin-top: 120px;
    }
  }
</style>
